<template>
  <div class="export-list-wrapper">
    <el-autocomplete class="input" placeholder="请输入客户名称" size="small" v-model="customerName" :fetch-suggestions="fetchSuggestion"
    ></el-autocomplete>
    <van-form>
      <van-field name="datetimePicker" :value="time" label="日期" placeholder="点击选择时间"
                 @click="showPicker = true" @focus="noBomBox"
      />
      <van-calendar v-model="showPicker" :min-date="minDate" type="range" allow-same-day @confirm="onConfirm"/>
    </van-form>
    <el-button @click="queryDetail" size="small" style="width: 100%;margin-top: 8px;" type="primary">查询</el-button>
    <el-button size="small" @click="exportExcel" style="width: 100%;margin-left: 0;margin-top: 8px;">导出Excel</el-button>

    <div class="statistic">总金额：<span class="num">{{ totalJe | formatNum }}</span></div>

    <el-table :data="tableData" size="small">
      <el-table-column prop="dh" label="单号"></el-table-column>
      <el-table-column prop="spname" label="品名"></el-table-column>
      <el-table-column prop="dw" label="单位"></el-table-column>
      <el-table-column prop="sl" label="数量"></el-table-column>
      <el-table-column prop="je" label="金额"></el-table-column>
      <el-table-column prop="rq" label="日期"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  name: 'exportList',
  data() {
    return {
      customerList: [],
      customerName: '',
      minDate: dayjs().subtract(3, 'year').toDate(),
      time: [],
      timeArray: [],
      showPicker: false,
      tableData: []
    }
  },
  filters: {
    formatNum(num) {
      return num.replace(/\.00$/, '')
    }
  },
  computed: {
    totalJe() {
      return this.tableData.reduce((prev, curr) => {
        return prev + curr.je
      }, 0).toFixed(2)
    }
  },
  mounted() {
    this.getCustomerList()
  },
  methods: {
    fetchSuggestion(queryString, cb) {
      let customerList = this.customerList
      let results = queryString ? customerList.filter(this.createFilter(queryString)) : customerList
      results = results.map(item => {
        return {
          label: item.khname,
          value: item.khname
        }
      }) || []
      cb(results)
    },
    createFilter(queryString) {
      return (item) => {
        return (item.khname?.indexOf(queryString) !== -1)
      }
    },
    getCustomerList() {
      this.$http.post('/customer/getAllCustomer').then(res => {
        this.customerList = res.data
      })
    },
    queryDetail() {
      if(!this.checkProps()) return
      let data = {
        khname: this.customerName,
        startTime: dayjs(this.timeArray[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs(this.timeArray[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
      }
      this.$http.post('/customer/queryDZMX', data).then(res => {
        this.tableData = res.data
      })

      this.$buryingPoint('客户对账单-查询', {
        khname: this.customerName,
        startTime: dayjs(this.timeArray[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs(this.timeArray[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
      })
    },
    checkProps() {
      if (!this.customerName) {
        this.$message.error('请输入客户名称')
        return false
      }
      if (!this.timeArray.length) {
        this.$message.error('请选择时间')
        return false
      }
      return true
    },
    noBomBox(Event) {
      document.activeElement.blur()
    },
    onConfirm(date) {
      console.log(date, 'date')
      this.timeArray = date
      this.time = `${date[0].getMonth() + 1}/${date[0].getDate()} -- ${date[1].getMonth() + 1}/${date[1].getDate()}`
      this.showPicker = false
    },
    exportExcel() {
      if(!this.checkProps()) return
      let data = {
        khname: this.customerName,
        startTime: dayjs(this.timeArray[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs(this.timeArray[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
      }

      this.$http.post('/customer/exportChmx', data, {responseType: 'blob'}).then(res => {
        console.log(res)
      })

      this.$buryingPoint('客户对账单-导出excel', {
        khname: this.customerName,
        startTime: dayjs(this.timeArray[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs(this.timeArray[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
      })
    }
  }
}
</script>

<style scoped lang="scss">
.export-list-wrapper {
  padding: 6px;
  .input {
    width: 100%;
  }

  .statistic {
    margin: 10px 0;
    font-size: 12px;
    color: #999999;
    .num {
      color: #ef714c;
      font-weight: bold;
    }
  }
}
</style>
